import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
import { PdfJs } from "../interface";
import Annotation from "./Annotation";
import PopupWrapper from "./PopupWrapper";
import { FC, ReactElement } from "react";

interface PopupProps {
  annotation: PdfJs.Annotation;
  page: PdfJs.Page;
  viewport: PdfJs.ViewPort;
}

const Popup: FC<PopupProps> = ({ annotation, page, viewport }) => {
  const isRenderable = !!(annotation.title || annotation.contents);

  // Don't render the popup for annotation whose parent renders the annotation themselves
  const ignoredParents = [
    "Circle",
    "Ink",
    "Line",
    "Polygon",
    "PolyLine",
    "Square",
  ];
  const hasPopup =
    !annotation.parentType ||
    ignoredParents.indexOf(annotation.parentType) !== -1;

  useIsomorphicLayoutEffect(() => {
    if (!annotation.parentId) {
      return;
    }
    const parent = document.querySelector(
      `[data-annotation-id="${annotation.parentId}"]`
    ) as HTMLElement;
    const container = document.querySelector(
      `[data-annotation-id="${annotation.id}"]`
    ) as HTMLElement;
    if (!parent || !container) {
      return;
    }
    const left = parseFloat(parent.style.left);
    const top = parseFloat(parent.style.top) + parseFloat(parent.style.height);

    container.style.left = `${left}px`;
    container.style.top = `${top}px`;
    container.style.transformOrigin = `-${left}px -${top}px`;
  }, []);

  return (
    <Annotation
      annotation={annotation}
      hasPopup={hasPopup}
      ignoreBorder={false}
      isRenderable={isRenderable}
      page={page}
      viewport={viewport}
    >
      {(props): ReactElement => (
        <div
          {...props.slot.attrs}
          className="rpv-core__annotation rpv-core__annotation--popup"
          data-annotation-id={annotation.id}
        >
          <PopupWrapper annotation={annotation} />
        </div>
      )}
    </Annotation>
  );
};

export default Popup;
